<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>文本编辑</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="${contextPath}/resources/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${contextPath}/resources/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${contextPath}/resources/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script src="${contextPath}/resources/js/colorpicker.js"></script>
    <link rel="stylesheet" href="${contextPath}/resources/css/colorpicker.css"/>
</head>
<body>
<div class="pageheader">
    <h2>文章编辑</h2>
</div>
<div class="contentpanel">
    <div class="panel panel-default">
        <form:form commandName="formDto" cssClass="form-horizontal form-bordered">
            <div class="form-group">
                <label class="col-sm-1 control-label">标题</label>

                <div class="col-sm-3">
                    <form:input path="title" cssClass="form-control" placeholder="标题"/>
                    <form:errors path="title" cssClass="error text-danger"/>
                </div>
                <label class="col-sm-1 control-label">标题颜色</label>

                <div class="col-sm-3">
                    <form:input path="color" name="colorpicker" class="form-control colorpicker-input"
                                id="colorpicker"/>
                  <span id="colorSelector" class="colorselector">
                    <span></span>
                  </span>
                </div>

                <label class="col-sm-1 control-label">是否加粗</label>

                <div class="col-sm-1">
                    <div class="checkbox block"><label><form:checkbox path="strong"/></label></div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">正文</label>

                <div class="col-sm-10">
                    <form:textarea path="content" cssStyle="width:100%;height:400px"/>
                    <form:errors path="content" cssClass="error text-danger"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"></label>

                <div class="col-sm-8">
                    <button type="submit" class="btn btn-primary">提交</button>
                    <a href="javascript:window.history.go(-1);" class="btn btn-default">取消</a>
                </div>
            </div>
        </form:form>
    </div>
</div>
<script type="text/javascript">
    var ue = UE.getEditor('content');
    jQuery(document).ready(function () {
        if (jQuery('#colorpicker').length > 0) {
            jQuery('#colorSelector').ColorPicker({
                onShow: function (colpkr) {
                    jQuery(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    jQuery(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    jQuery('#colorSelector span').css('backgroundColor', '#' + hex);
                    jQuery('#colorpicker').val('#' + hex);
                }
            });
        }
    });
</script>
</body>
</html>